<template>
  <div class="app-wrapper">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" clearable placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="区域">
        <el-select v-model="formInline.region" clearable placeholder="请选择区域">
          <el-option label="东北" value="东北"></el-option>
          <el-option label="华南" value="华南"></el-option>
          <el-option label="华东" value="华东"></el-option>
          <el-option label="华北" value="华北"></el-option>
          <el-option label="华中" value="华中"></el-option>
          <el-option label="西南" value="西南"></el-option>
          <el-option label="西北" value="西北"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期范围">
        <el-date-picker v-model="formInline.range" type="daterange" align="right" unlink-panels value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tableData" stripe border style="overflow-x:hidden;" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50px">
      </el-table-column>
      <el-table-column prop="id" label="ID" width="100px">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="100px">
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="100px">
      </el-table-column>
      <el-table-column prop="birth" label="出生日期" width="100px">
      </el-table-column>
      <el-table-column prop="region" label="区域" width="100px">
      </el-table-column>
      <el-table-column prop="education" label="学历" width="100px">
      </el-table-column>
      <el-table-column prop="zip" label="邮编" width="100px">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="300px">
      </el-table-column>
      <el-table-column prop="addr" label="籍贯" width="380px">
      </el-table-column>
      <el-table-column label="操作" min-width>
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="paginationPageSizes" :layout="paginationLayout" :page-size="pageSize" :total="totalCount">
    </el-pagination>
    <el-button size="mini" style="float:left;margin-top: 10px;" type="primary" icon="el-icon-plus" @click="handleAdd">新增记录</el-button>
    <el-button size="mini" style="float:left;margin-top: 10px;" type="danger" icon="el-icon-delete" @click="batchDelete">批量删除</el-button>
    <el-dialog :title="dialogTitle" :visible.sync="recordFormShow" width="500px">
      <el-card class="box-card" v-loading="formloading">
        <el-form :model="record" ref="recordForm" size="mini" label-width="80px">
          <el-form-item label="ID" prop="id" style="display:none">
            <el-input type="text" v-model="record.id"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input type="text" v-model="record.name"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="record.sex">
              <el-radio class="radio" label="男"></el-radio>
              <el-radio class="radio" label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出生日期" prop="birth">
            <el-date-picker type="date" placeholder="选择日期" v-model="record.birth" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="区域" prop="region">
            <el-select v-model="record.region" clearable placeholder="请选择区域" style="width: 100%;">
              <el-option label="东北" value="东北"></el-option>
              <el-option label="华南" value="华南"></el-option>
              <el-option label="华东" value="华东"></el-option>
              <el-option label="华北" value="华北"></el-option>
              <el-option label="华中" value="华中"></el-option>
              <el-option label="西南" value="西南"></el-option>
              <el-option label="西北" value="西北"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学历" prop="education">
            <el-radio-group v-model="record.education">
              <el-radio class="radio" label="大专"></el-radio>
              <el-radio class="radio" label="本科"></el-radio>
              <el-radio class="radio" label="硕士"></el-radio>
              <el-radio class="radio" label="博士"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="邮编" prop="zip">
            <el-input type="text" v-model="record.zip"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input type="text" v-model="record.email"></el-input>
          </el-form-item>
          <el-form-item label="籍贯" prop="addr">
            <el-input type="text" v-model="record.addr"></el-input>
          </el-form-item>
        </el-form>
        <div style="float:right;margin-bottom:20px;">
          <el-button size="mini" @click="recordFormShow = false">取消</el-button>
          <el-button size="mini" type="primary" @click="recordFormSubmit('recordForm')">提交</el-button>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>
<style scoped>
.el-pagination {
  float: right;
  margin-top: 10px;
  margin-bottom: 20px;
}
</style>
<script>
import { mapGetters } from 'vuex'
import { list, del, batchdel, save } from '@/api/user'

export default {
  data() {
    return {
      loading: true,
      currentPage: 1,
      pageSize: 10,
      totalCount: 0,
      recordFormShow: false,
      formloading: false,
      formInline: {
        name: '',
        region: '',
        range: ''
      },
      record: {},
      dialogTitle: '',
      tableData: [],
      multipleSelection: []
    }
  },
  computed: {
    ...mapGetters(['paginationPageSizes', 'paginationLayout', 'pickerOptions']) // 映射vuex中的getters
  },
  created() {
    this.$options.methods.queryList.bind(this)({
      pageSize: this.pageSize,
      currentPage: this.currentPage
    })
  },
  methods: {
    queryList() {
      // es6对象合并
      let params = Object.assign(
        {
          pageSize: this.pageSize,
          currentPage: this.currentPage
        },
        this.formInline
      )
      this.loading = true
      list(params).then(response => {
        this.tableData = response.users
        this.totalCount = response.totalCount
        this.loading = false
      })
    },
    batchDelete() {
      let ids = this.multipleSelection
        .map(v => {
          return v.id
        })
        .join(',')
      let _self = this
      this.$confirm('确认批量删除这些记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          _self.loading = true
          batchdel(ids).then(response => {
            this.$message({
              type: 'success',
              message: response.msg
            })
            _self.loading = false
            // 删除之后刷新一下数据
            _self.$options.methods.queryList.bind(_self)()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '操作已取消'
          })
        })
    },
    handleAdd() {
      this.dialogTitle = '新增记录'
      this.record = {}
      this.recordFormShow = true
    },
    handleEdit(index, row) {
      this.dialogTitle = '编辑记录'
      this.record = JSON.parse(JSON.stringify(row)) // es6对象深拷贝
      this.recordFormShow = true
    },
    recordFormSubmit() {
      // TODO 做表单校验逻辑
      this.formloading = true
      save(this.record).then(response => {
        this.$message({
          type: 'success',
          message: response.msg
        })
        this.formloading = false
        this.recordFormShow = false
        this.$options.methods.queryList.bind(this)()
      })
    },
    handleDelete(index, row) {
      let _self = this
      this.$confirm('确认删除该条记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          _self.loading = true
          del(row.id).then(response => {
            this.$message({
              type: 'success',
              message: response.msg
            })
            _self.loading = false
            // 删除之后刷新一下数据
            _self.$options.methods.queryList.bind(_self)()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '操作已取消'
          })
        })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.$options.methods.queryList.bind(this)()
    },
    handleCurrentChange(val) {
      // vue实例中由于作用域原因方法互相调用需要使用下面这种方式
      this.currentPage = val
      this.$options.methods.queryList.bind(this)()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    onSubmit() {
      this.$options.methods.queryList.bind(this)()
    }
  }
}
</script>
